<template>
    <div class="ltLayout">
        <div class="title">TA的合集和视频列表</div>
        <template v-if="true">
            <ul class="infoBox">
                <li v-for="item in info?.seasons_list" :key="item.meta.season_id">
                    <list-item
                        :season_id="item.meta.season_id"
                        :cover="item.meta.cover"
                        :name="item.meta.name"
                        :ptime="item.meta.ptime"
                        :total="item.meta.total"
                        :isDoc="true"
                    ></list-item>
                </li>
                <li v-for="item in info?.series_list" :key="item.meta.season_id">
                    <list-item
                        :season_id="item.meta.season_id"
                        :cover="item.meta.cover"
                        :name="item.meta.name"
                        :ptime="item.meta.ctime"
                        :total="item.meta.total"
                    ></list-item>
                </li>
            </ul>
        </template>
        <template v-else>
            <template v-for="item in info?.seasons_list" :key="item">
                <video-list :mid="item.meta.mid" :list="item.archives" :total="item.meta.total" v-if="item.archives.length" :isFull="true">
                    <template #title>
                        <span>{{ item.meta.name }}</span>
                    </template>
                </video-list>
            </template>
            <template v-for="item in info?.series_list" :key="item">
                <video-list :mid="item.meta.mid" :list="item.archives" :total="item.meta.total" v-if="item.archives.length" :isFull="true">
                    <template #title>
                        <span>{{ item.meta.name }}</span>
                    </template>
                </video-list>
            </template>
        </template>
    </div> 
</template>

<script lang="ts" setup>
import { listItem } from '../components'
import { get } from '@/http/axios'
import { onBeforeMount, ref } from 'vue'
import { videoList } from './index'

interface Props{
    mid:string
}
const props = defineProps<Props>()
let info = ref()
onBeforeMount(() => {
    initData()
})
function initData() {
    get('/x/polymer/web-space/seasons_series_list?mid='+ props.mid +'&page_num=1&page_size=20')
    .then(res => {
        console.log('合集与列表',res.data);
        info.value = res.data.items_lists

    }).catch(err => {
        alert('合集与列表数据加载失败')
    })
}
</script>

<style lang="scss" scoped>
.ltLayout{
    margin-top: 30px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    @include flexColumnCenter;
    background-color: white;
    gap: 15px 0;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
}
.title{
    line-height: 30px;
    font-size: 21px;
    width: 100%;
    text-align: left;
}
.infoBox{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    & li{
        width: calc((100% - 100px) / 6);
        height: 180px;
    }
}
</style>